import React, { Component, useState, useEffect } from 'react'

export default function (props) {
  let [data, setData] = useState({count: 0})

  // useEffect(() => { // componentDidMount  componentDidUpdate
  //   console.log('effect')
  // })

  // useEffect(() => { // componentDidMount [] 不依赖任何值，只执行一次
  //   console.log('effect')
  // }, [])

  // useEffect(() => { // componentDidMount  componentDidUpdate
  //   console.log('effect')
  // }, [data]) // [data, abc] // 数组可以写多个


  function loadData() {
    return fetch('')
      .then(response => response.json())
      .then(result => {
        return result
      })
  }

  useEffect(() => {
    console.log('mounted')

    // ;(async () => {
    //   let retult = await loadData()
    // })()

    // console.log(0) // 在前面先执行

    // fetch('')
    //   .then(response => response.json())
    //   .then(result => {
    //     console.log(result)
    //   })
    return () => {
      console.log('unmount')
    }
  }, [])
  
  return (
    <>
      <div>{data.count}</div>
      <button onClick={() => setData(data => ({count: data.count + 1}))}>click</button>
    </>
  )
}
